<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    :width="860"
    @cancel="cancel"
  >
    <a-form :form="form" layout="horizontal">
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="主机名"
      >
        <a-input/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="类型"
      >
        <a-select>
          <a-select-option value="Windows">
            Windows服务器
          </a-select-option>
          <a-select-option value="Linux">
            Linux服务器
          </a-select-option>
          <a-select-option value="交换机">
            交换机
          </a-select-option>
          <a-select-option value="防火墙">
            防火墙
          </a-select-option>
          <a-select-option value="单向网闸">
            单向网闸
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-row>
          <a-col :offset="1" style="color:rgba(0, 0, 0, 0.85)">
            接口（可重复添加包含如下属性）
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="3">
            类型
          </a-col>
          <a-col :span="7">
            IP地址
          </a-col>
          <a-col :span="6">
            DNS名称
          </a-col>
          <a-col :span="5">
            连接到（DNS或IP地址）
          </a-col>
          <a-col :span="3">
            端口
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="3">
            客户端
          </a-col>
          <a-col :span="7">
            <a-input/>
          </a-col>
          <a-col :span="6">
            <a-input/>
          </a-col>
          <a-col :span="5">
            <a-radio-group button-style="solid" default-value="a">
              <a-radio-button value="a">
                IP地址
              </a-radio-button>
              <a-radio-button value="b">
                DNS
              </a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="3">
            <a-input/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="3">
            SNMP
          </a-col>
          <a-col :span="7">
            <a-input/>
          </a-col>
          <a-col :span="6">
            <a-input/>
          </a-col>
          <a-col :span="5">
            <a-radio-group button-style="solid" default-value="a">
              <a-radio-button value="a">
                IP地址
              </a-radio-button>
              <a-radio-button value="b">
                DNS
              </a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="3">
            <a-input/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="4">
            SNMP version
          </a-col>
          <a-col :span="12">
            <a-select default-value="SNMPv1">
              <a-select-option value="SNMPv1">
                SNMPv1
              </a-select-option>
              <a-select-option value="SNMPv2">
                SNMPv2
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="4">
            SNMP community
          </a-col>
          <a-col :span="12">
            <a-input/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="3">
            JMX
          </a-col>
          <a-col :span="7">
            <a-input/>
          </a-col>
          <a-col :span="6">
            <a-input/>
          </a-col>
          <a-col :span="5">
            <a-radio-group button-style="solid" default-value="a">
              <a-radio-button value="a">
                IP地址
              </a-radio-button>
              <a-radio-button value="b">
                DNS
              </a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="3">
            <a-input/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-row :gutter="16">
          <a-col :span="3">
            IPMI
          </a-col>
          <a-col :span="7">
            <a-input/>
          </a-col>
          <a-col :span="6">
            <a-input/>
          </a-col>
          <a-col :span="5">
            <a-radio-group button-style="solid" default-value="a">
              <a-radio-button value="a">
                IP地址
              </a-radio-button>
              <a-radio-button value="b">
                DNS
              </a-radio-button>
            </a-radio-group>
          </a-col>
          <a-col :span="3">
            <a-input/>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="已启用"
      >
        <a-checkbox></a-checkbox>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import aModal from "@/common/modal"


  export default {
    name: "hostModal",
    props: ['title', 'visible'],
    components: {
      aModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        labelCol: {span: 7},
        wrapperCol: {span: 10},
      }
    },
    methods: {

      /*关闭modal*/
      cancel(e) {
        this.form.resetFields();
        this.$emit("cancel", e)
      },

    }
  }
</script>

<style scoped>

</style>
